import { TMap } from '../map'
import { Point } from '../entity'
import { LngLat, LngLatBounds } from '../entity/lngLat'

import { Overlay } from './overlay'
import { LineStyle } from './style'
import { DefinedOverlayTypeEnum } from './enum'

/**
 * 折线覆盖物的属性对象
 */
export interface PolylineOptions {
    /**
     * 折线颜色
     *
     * 默认值为 `'#0000FF'`
     */
    color?: string;

    /**
     * 折线的宽度，以像素为单位
     *
     * 默认值为 `3`
     */
    weight?: number;

    /**
     * 折线的透明度（范围 `0-1` 之间）
     *
     * 默认值为 `0.5`
     */
    opacity?: number;

    /**
     * 折线的样式
     *
     * 默认值为 `'solid'`
     */
    lineStyle?: LineStyle
}

/**
 * 折线覆盖物事件工厂对象
 */
type PolylineEventFactory = {
    /**
     * 点击折线后会触发此事件
     */
    click: (event: { type: 'click', target: Polyline, lnglat: LngLat, containerPoint: Point }) => void;

    /**
     * 双击折线后会触发此事件
     */
    dblclick: (event: { type: 'dblclick', target: Polyline, lnglat: LngLat, containerPoint: Point }) => void;

    /**
     * 鼠标在折线上按下触发此事件
     */
    mousedown: (event: { type: 'mousedown', target: Polyline, lnglat: LngLat, containerPoint: Point }) => void;

    /**
     * 鼠标在折线释放触发此事件
     */
    mouseup: (event: { type: 'mouseup', target: Polyline, lnglat: LngLat, containerPoint: Point }) => void;

    /**
     * 鼠标离开折线时触发此事件
     */
    mouseout: (event: { type: 'mouseout', target: Polyline, lnglat: LngLat, containerPoint: Point }) => void;

    /**
     * 当鼠标进入折线区域时会触发此事件
     */
    mouseover: (event: { type: 'mouseover', target: Polyline, lnglat: LngLat, containerPoint: Point }) => void;

    /**
     * 移除折线时触发
     */
    remove: (event: { type: 'remove', target: Polyline }) => void;
}

/**
 * 使用浏览器的矢量制图工具在地图上绘制折线的地图叠加层
 */
export interface Polyline extends Overlay {
    readonly points: Array<LngLat>;
    readonly options: PolylineOptions;

    /**
     * 创建折线覆盖物对象
     *
     * @param points 坐标数组
     *
     * @param options 折线的属性对象
     */
    new (points: Array<LngLat>, options?: PolylineOptions): Polyline;

    /**
     * 叠加层类型
     */
    getType: () => DefinedOverlayTypeEnum.Polyline;

    /**
     * 返回折线的点数组
     */
    getLngLats: () => Array<LngLat>;
    /**
     * 设置折线的点数组
     *
     * @param lnglats 顶点数组
     */
    setLngLats: (lnglats: Array<LngLat>) => void;

    /**
     * 返回折线的颜色
     */
    getColor: () => string;
    /**
     * 设置折线的颜色
     *
     * @param color 合法的 `CSS` 颜色值
     */
    setColor: (color: string) => void;

    /**
     * 返回信息浮窗显示时向右下角偏移量
     */
    getOffset: () => number;
    /**
     * 设置信息浮窗显示时向右下角偏移量（像素）
     *
     * @param point 偏移量（像素）
     */
    setOffset: (point: number) => void;

    /**
     * 返回折线的透明度
     */
    getOpacity: () => number;
    /**
     * 设置折线的透明度
     *
     * @param opacity 取值范围 `0-1` 之间
     */
    setOpacity: (opacity: number) => void;

    /**
     * 返回折线的宽度
     */
    getWeight: () => number;
    /**
     * 设置折线的宽度
     *
     * @param weight 范围为大于等于 `1` 的整数
     */
    setWeight: (weight: number) => void;

    /**
     * 返回当前折线样式状态，实线或者虚线
     */
    getLineStyle: () => LineStyle;
    /**
     * 设置折线样式状态，实线或者虚线
     *
     * @param weight 折线样式状态
     */
    setLineStyle: (weight: LineStyle) => void;

    /**
     * 返回折线的地理区域范围
     */
    getBounds: () => LngLatBounds;

    /**
     * 返回折线所在的 `map` 对象
     */
    getMap: () => TMap;

    /**
     * 是否启用线编辑功能，`true` 表示启用，`false` 表示禁止
     */
    isEditable: () => boolean;
    /**
     * 启用线编辑功能
     */
    enableEdit: () => void;
    /**
     * 禁用线编辑功能
     */
    disableEdit: () => void;

    /**
     * 添加事件监听函数
     */
    addEventListener: <Event extends keyof PolylineEventFactory>(event: Event, handler: PolylineEventFactory[Event]) => void;
    
    /**
     * 移除事件监听函数
     */
    removeEventListener: <Event extends keyof PolylineEventFactory>(event: Event, handler: PolylineEventFactory[Event]) => void
}
